<template>
 <Layout :class="'bg-white p-2'">	
    <Row>
		<Col span="3">
		  <Date-picker
		    :class="' w-100 m-2'"
		    type="datetime"
			v-model="statisticStartTime"
		    placeholder="统计开始时间"
		  ></Date-picker>
		</Col>
		<div class="to">~</div>
		<Col span="3">
		  <Date-picker
		    format="yyyy-MM-dd HH:mm:ss"
		    :class="'w-100 m-2'"
		    type="datetime"
			v-model="statisticEndTime"
		    placeholder="统计结束时间"
		  >
		  </Date-picker>
		</Col>
		<Col span="2" push="1">
			<Button
			  class="m-2 w-75 search-btn"
			  type="primary"
			  shape="circle"
			  icon="ios-search"
			  >查询</Button
			>
		</Col>
	</Row>
	<Row>
		<Col span="12" v-for="(item,index) in charts.tmk1" :key="index">
		      <Card>
		        <div slot="title">
		          <Avatar icon="md-book" size="small" style="color: #ffa114; background-color: #ffe2b8;" />
		        </div>
		        <echartPie :id='chartsNum' :pieData='charts.tmk1[index].data' :pieName='charts.tmk1[index].text'></echartPie>
		      </Card>
		</Col>
	</Row>
</Layout>
</template>

<script>
	import echartPie from "../../src/components/echartsPie"
export default {
	components: {
	    echartPie,
	  },
	    data() { 
			return { 
				statisticStartTime:'',
				statisticEndTime:'',
				chartsNum:"charts1",
				charts:{
					tmk1:[
						{
							text:'TMK统计',
							data: [
									{value: 1048, name: '线索总量'},
									{value: 735, name: '已预约访量'},
									{value: 580, name: '已到访量'},
									{value: 484, name: '有效到访'},
									{value: 300, name: '有效报名'},
									{value: 180, name: '回访量'}
							],
						},
						{
							text:'咨询顾问统计',
							data: [
									{value: 580, name: '已到访量'},
									{value: 484, name: '已试听量'},
									{value: 300, name: '报名量'},
									{value: 180, name: '回访量'}
							],
						},
						{
							text:'市场专员',
							data: [
									{value: 348, name: '线索总量'},
									{value: 135, name: '已预约访量'},
									{value: 580, name: '已到访量'},
									{value: 70, name: '有效到访量'},
									{value: 284, name: '已试听'},
									{value: 300, name: '有效报名'},
									{value: 180, name: '回访量'}
							],
						},
						{
							text:'总计',
							data: [
									{value: 1048, name: '线索总量'},
									{value: 735, name: '已约访量'},
									{value: 580, name: '已到访量'},
									{value: 484, name: '有效到访'},
									{value: 300, name: '已试听'},
									{value: 300, name: '已报名'},
									{value: 180, name: '回访量'}
							],
						},
						
					]
				}
				}
			 }, //图表实例
	    mounted() { 
			
			},  
	};
</script>

<style scoped>
	.to{
		padding: 10px 20px 0 40px;
	}
</style>
